<template>
  <div class="px-5 min-h-full bg-white">
    <!-- 路由标题 -->
    <div class="font-bold text-3xl py-3">视频</div>
    <!-- 导航栏 -->
    <ul class="flex gap-10 text-sm cursor-default sticky top-0 z-50 bg-white">
      <li :class="activeIndex == index ? 'active text-[#1ecc94]' : ''" class="py-2" @click="changIndex(index)"
        v-for="(item, index) in tabList">
        {{ item }}
      </li>
    </ul>
    <!-- 导航对应视图 -->
    <div class="pb-5">
      <!-- 推荐box -->
      <div v-if="activeIndex == 0">
        <swiper :modules="modules" :slides-per-view="2" :space-between="20" navigation :pagination="{ clickable: true }"
          class="h-48 flex " style="flex: 1 1 50%;">
          <swiper-slide v-for="item in videoList" class="rounded-md" :key="item.id">
            <div class="h-fit relative rounded-md">
              <img :src="item.picUrl" class="rounded-md w-full h-full" @click="goPlayMv(item.id)" />
              <div class="absolute top-2 right-0 px-3 py-1 rounded-l-full text-xs bg-white/50">视频</div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="relative py-1 my-3 flex items-end">
          <div class="text-xl text-black">最新</div>
          <div class="absolute right-5 flex items-center gap-1 text-sm text-gray-500">
            更多
            <svg t="1728549652547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="6419" id="mx_n_1728549652548" width="10" height="10">
              <path
                d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                p-id="6420"></path>
            </svg>
          </div>
        </div>
        <swiper :modules="modules" :slides-per-view="3" :space-between="20" navigation :pagination="{ clickable: true }"
          class="h-48">
          <swiper-slide v-for="item in newMvList" :key="item.id" class="rounded-md">
            <div class="w-full h-36 relative ">
              <img :src="item.cover" class="rounded-md w-full h-full" @click="goPlayMv(item.id)" />
              <div
                class="absolute bottom-2 right-3 px-2 py-1 rounded-md text-xs bg-black/50 text-white flex items-center gap-1">
                <svg t="1742699499050" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="9270" width="15" height="15">
                  <path
                    d="M981.333333 768c-8.533333 0-17.066667 0-25.6-8.533333l-298.666666-213.333334c-12.8-8.533333-17.066667-21.333333-17.066667-34.133333 0-12.8 8.533333-25.6 17.066667-34.133333l298.666666-213.333334c12.8-8.533333 29.866667-8.533333 42.666667 0 12.8 8.533333 21.333333 21.333333 21.333333 38.4v426.666667c0 17.066667-8.533333 29.866667-21.333333 38.4-4.266667 0-12.8 4.266667-21.333333 4.266667h4.266666V768z m-226.133333-256l183.466667 132.266667V384l-183.466667 132.266667V512z"
                    fill="#ffffff" p-id="9271"></path>
                  <path
                    d="M597.333333 853.333333H128c-72.533333 0-128-55.466667-128-128V298.666667c0-72.533333 55.466667-128 128-128h469.333333c72.533333 0 128 55.466667 128 128v426.666666c0 72.533333-55.466667 128-128 128zM128 256c-25.6 0-42.666667 17.066667-42.666667 42.666667v426.666666c0 25.6 17.066667 42.666667 42.666667 42.666667h469.333333c25.6 0 42.666667-17.066667 42.666667-42.666667V298.666667c0-25.6-17.066667-42.666667-42.666667-42.666667H128z"
                    fill="#ffffff" p-id="9272"></path>
                </svg>
                <span>{{ (item.playCount / 10000).toFixed(2) }}万</span>
              </div>
            </div>
            <div class="mt-1">
              <div class="text-sm">{{ item.name }}</div>
              <div class="text-xs mt-1 text-gray-500">{{ item.artistName }}</div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="relative py-1 my-3 flex items-end">
          <div class="text-xl text-black">网易出品</div>
          <div class="absolute right-5 flex items-center gap-1 text-sm text-gray-500">
            更多
            <svg t="1728549652547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="6419" id="mx_n_1728549652548" width="10" height="10">
              <path
                d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                p-id="6420"></path>
            </svg>
          </div>
        </div>
        <swiper :modules="modules" :slides-per-view="3" :space-between="20" navigation :pagination="{ clickable: true }"
          class="h-48">
          <swiper-slide v-for="item in wyMvList" :key="item.id" class="rounded-md">
            <img :src="item.cover" class="w-full h-36  rounded-md" @click="goPlayMv(item.id)" />
            <div class="mt-1">
              <div class="text-sm text-ellipsis line-clamp-1">{{ item.name }}</div>
              <div class="text-xs mt-1 text-gray-500">{{ item.artistName }}</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <!-- 排行榜box -->
      <div v-else-if="activeIndex == 1">
        <div class="flex gap-8 h-32 my-5">
          <img src="../../assets/top-mv.png" class="w-32 h-full">
          <div class="flex-1 flex-col flex gap-2">
            <div class="text-lg">飙升榜.mv</div>
            <div class="text-gray-500 text-sm">{{ getNewDate() }}</div>
          </div>
        </div>
        <ul class="flex gap-10 text-sm cursor-default my-2">
          <li class="py-2" v-for="(item, index) in subTabList"
            :class="activeSubIndex == index ? 'active text-[#1ecc94]' : ''" @click="changeActiveSubIndex(index)">{{ item
            }}</li>
        </ul>
        <div class="min-h-48 w-full">
          <div class="flex mb-10 gap-5 h-20" v-for="item, index in topMvList">
            <div class="w-20 h-full grid place-items-center">
              <div :class="{ clip_path: index < 3 }">
                {{ index + 1 }}
              </div>
            </div>
            <div class="h-20 w-32 relative group/play" @click="goPlayMv(item.id)">
              <img :src="item.cover" class="w-full h-full rounded-md">
              <div
                class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2  invisible group-hover/play:visible duration-100">
                <svg t="1743233007342" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="5408" width="40" height="40">
                  <path
                    d="M512.1 63.9c-247.4 0-447.9 200.5-447.9 447.9 0 247.4 200.5 447.9 447.9 447.9S960 759.2 960 511.8c0.1-247.4-200.5-447.9-447.9-447.9z m210.5 480.2L413.7 722.4c-24.9 14.4-56-3.6-56-32.3V333.5c0-28.7 31.1-46.7 56-32.3l308.8 178.3c24.9 14.3 24.9 50.3 0.1 64.6z"
                    p-id="5409" fill="#1ecc94"></path>
                </svg>
              </div>
            </div>
            <div class="flex-col h-full justify-around flex flex-1">
              <div class=" text-ellipsis line-clamp-1 text-sm">{{ item.name }}</div>
              <div class="text-sm">{{ item.artistName }}</div>
              <div class="text-sm text-gray-400">发布时间：{{ item.mv.publishTime }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 视频库box -->
      <div v-else-if="activeIndex == 2">
        <div class="flex flex-col gap-4 text-sm">
          <div class="flex gap-2">
            <div class="rounded-full px-7 py-1 border" :class="{ 'bg-[#1ecc94] text-white duration-100': allParams.area === item }"
              v-for="item in allParamsArea" @click="changeAllParamsArea(item)">{{ item }}</div>
          </div>
          <div class="flex gap-2">
            <div class="rounded-full px-7 py-1 border" :class="{ 'bg-[#1ecc94] text-white duration-100': allParams.type === item }"
              v-for="item in allParamsType" @click="changeAllparamsType(item)">{{ item }}</div>
          </div>
        </div>
        <div class="my-5 flex flex-col gap-5">
          <div class="flex justify-between items-center">
            <div class="text-xl font-bold">全部MV</div>
            <div class="flex gap-5 text-sm pr-5">
              <span :class="{ 'text-[#1ecc94]': allParams.order === '最新' }" @click="changeAllMvOrder('最新')">最新</span>
              <span :class="{ 'text-[#1ecc94]': allParams.order === '最热' }" @click="changeAllMvOrder('最热')">最热</span>
            </div>
          </div>
          <div class="flex flex-wrap gap-5 min-h-20">
            <template v-if="allMvList?.length">
              <div class="w-[130px]" v-for="item in allMvList">
                <div class="h-20 relative group/play" @click="goPlayMv(item.id)">
                  <img :src="item.cover" class="w-full h-20 rounded-md">
                  <div
                    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2  invisible group-hover/play:visible duration-100">
                    <svg t="1743233007342" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="5408" width="40" height="40">
                      <path
                        d="M512.1 63.9c-247.4 0-447.9 200.5-447.9 447.9 0 247.4 200.5 447.9 447.9 447.9S960 759.2 960 511.8c0.1-247.4-200.5-447.9-447.9-447.9z m210.5 480.2L413.7 722.4c-24.9 14.4-56-3.6-56-32.3V333.5c0-28.7 31.1-46.7 56-32.3l308.8 178.3c24.9 14.3 24.9 50.3 0.1 64.6z"
                        p-id="5409" fill="#1ecc94"></path>
                    </svg>
                  </div>
                </div>
                <div class="mt-1 w-full">
                  <div class="text-sm text-ellipsis line-clamp-1">{{ item.name }}</div>
                  <div class="text-sm text-gray-500">{{ item.artistName }}</div>
                </div>
              </div>
            </template>
            <div v-else class="flex w-full justify-center items-center">
              <el-empty description="暂无mv～" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { Navigation, Scrollbar, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { useStore } from '../../store'
import { storeToRefs } from 'pinia'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/scrollbar'
import { router } from '@renderer/router'

const { videosStore } = useStore()
const modules = ref([Navigation, Scrollbar, A11y])
const tabList = ref(['推荐', '排行榜', '视频库'])
const subTabList = ref(['总榜', '内地', '港台', '欧美', '韩国', '日本'])
const allParamsArea = ref(['全部', '内地', '港台', '欧美', '韩国', '日本'])
const allParamsType = ref(['全部', '官方版', '原生', '现场版', '网易出品'])
const activeIndex = ref(0)
const activeSubIndex = ref(0)
const { videoList, newMvList, wyMvList, topMvList, allMvList } = storeToRefs(videosStore)
const params = reactive({
  limit: 20,
  area: ''
})
const allParams = reactive({
  order: '最新',
  limit: 30,
  area: '全部',
  type: '全部',
})
onMounted(async () => {
  getRecommendMvList()
  getNewsMvList()
  getWyMvList()
})
const getNewDate = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');  // 保证月份为两位数
  const day = String(today.getDate()).padStart(2, '0');  // 保证日期为两位数

  return `${year}-${month}-${day}`
}
const changIndex = (index: number) => {
  activeIndex.value = index
  if (index == 0) {
    getRecommendMvList()
    getNewsMvList()
    getWyMvList()
  }
  if (index == 1) {
    getTopMvList()
  }
  if (index == 2) {
    getAllMvList()
  }
}
const changeActiveSubIndex = (index: number) => {
  activeSubIndex.value = index
  if (index == 0) params.area = ''
  else params.area = subTabList.value[index]
  getTopMvList()
}
const changeAllParamsArea = (area: string) => {
  allParams.area = area
  getAllMvList()
}
const changeAllparamsType = (type: string) => {
  allParams.type = type
  getAllMvList()
}
const changeAllMvOrder = (order: string) => {
  allParams.order = order
  getAllMvList()
}
const getRecommendMvList = async () => {
  await videosStore.getVideoList()
}
const getNewsMvList = async () => {
  await videosStore.getNewMv(10)
}
const getWyMvList = async () => {
  await videosStore.getWyMvList(10)
}
const getTopMvList = async () => {
  await videosStore.getTopMvList(params)
}
const getAllMvList = async () => {
  await videosStore.getAllMvList(allParams)
}
const goPlayMv = (id: number) => {
  router.push({
    path: '/playMv',
    query: {
      id: id
    }
  })
}
</script>

<style scoped>
.active::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: #1ecc94;
  margin-top: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.clip_path {
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 85%, 0 100%, 0% 50%, 0 0);
  clip-path: polygon(100% 0%, 100% 100%, 50% 85%, 0 100%, 0% 50%, 0 0);
  background: #1ecc94;
  padding: 0 8px 3px;
  color: white;
}

:deep(.swiper-button-prev) {
  content: url('data:image/svg+xml;charset=utf-8,<svg t="1728565709710" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22742" width="200" height="200"><path d="M330.666667 512c0-14.933333 4.266667-29.866667 14.933333-40.533333l234.666667-277.33333399c23.466667-27.733333 64-29.866667 89.6-8.53333301 27.733333 23.466667 29.866667 64 8.53333299 89.6L477.866667 512l200.53333299 236.8c23.466667 27.733333 19.19999999 68.266667-8.53333299 89.6-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333301l-234.666667-277.33333399c-10.666667-10.666667-14.933333-25.6-14.933333-40.533333z" fill="" p-id="22743"></path></svg>');
}

:deep(.swiper-button-next) {
  content: url('data:image/svg+xml;charset=utf-8,<svg t="1728565688675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22580" width="200" height="200"><path d="M341.957209 959.354678c-12.893658 0-25.842575-4.425799-36.386722-13.467733-23.493064-20.10592-26.224268-55.426357-6.064113-78.891791L603.929736 511.789199l-304.423361-355.206978c-20.160155-23.465434-17.427928-58.786894 6.064113-78.891791 23.437805-20.024056 58.786894-17.373693 78.837556 6.064113l335.675132 391.620305c17.974373 20.952194 17.974373 51.875484 0 72.827679l-335.675132 391.620305C373.371686 952.717514 357.691565 959.354678 341.957209 959.354678z" p-id="22581"></path></svg>');
}
</style>
